<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Skidoo Redux</title>
		<style type="text/css">
			<!-- 
				@import "css/skidoo_redux.css"; 
				@import "css/skidoo_redux_theme.css";
			-->
		</style>
		<link rel="stylesheet" href="css/skidoo_redux_print.css" type="text/css" media="print">
		<script type="text/javascript" src="javascript/skidoo_redux_lean.js"></script>
		<script type="text/javascript">
			<!--
				if ( ( typeof( set_min_width ) ).toLowerCase() != 'undefined' ) { 
					set_min_width( 'page-container' , 780 );
				}
			//-->
		</script>
	</head>
	<body>
		<div id="page-container">
			<div id="masthead">
				<div class="inside">

<!-- masthead start -->

<h1>Skidoo Redux Lean</h1>

<!-- masthead end -->
				</div>
			</div>
			<div id="outer-column-container">
				<div id="inner-column-container">
					<div id="source-order-container">
						<div id="middle-column">
							<div class="inside">

<!-- middle column start -->

<p>
	This is a lean version of <a href="http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/">Skidoo 
	Redux</a>. The font size manager, style switcher, and <a href="http://webhost.bridgew.edu/etribou/layouts/rmenu/">menu
	system</a> found in Skidoo Redux have been removed in order to reduce bloat and complexity. Each section (masthead, left column,
	right column, middle column) has been marked in the HTML using HTML comments. Anything outside those comments you will probably
	never have to edit. The included javascript and stylesheets will probably never need to be touched either except for
	<a href="css/skidoo_redux_theme.css">skidoo_redux_theme.css</a> which will controls the colors, fonts, and other rules that control
	the look (but not the layout) of the page.
</p>

<h2>Float-based Layouts</h2>
<p>
	Skidoo is a float-based layout. This means that the major elements of the layout
	float. When an element floats it takes on some unique properties to which web developers
	might not be accustomed. The most troublesome of these is that floats wrap. This
	means if two or more floating elements are next to each other in a layout where there is
	not enough (horizontal) space to fit them both, one or more of the floating elements
	will be moved down the page until it finds a spot with enough space for it to fit. This
	creates a burden on the website developer/maintainer. You must be aware of and exercise
	control of space within your layout. 
</p>
<p>
	There is a problem: the user controls the dimensions of the viewport (the area within the
	web browser window where the webpage is rendered). A float-based layout may line up perfectly 
	inside a viewport at 600 pixels wide, but shrink it to 500 pixels and you might see one of the 
	columns suddenly disappear to the bottom of the webpage. This is undesirable especially in a 
	three-column layout like Skidoo. So we must somehow force the webpage to render at or above
	a set of minimum dimensions (usually we only care about width), so that the layout will not
	break even as the viewport shrinks beyond these minimum dimensions. The simplest solution is to use 
	the CSS property <code>min-width</code> on either the body element or an immediate child that
	wraps the rest of the webpage. However some browsers, such as Internet Explorer pre-version 7, 
	don't understand this property. The only other solution is to institute a JavaScript solution 
	that controls the size of these elements on the fly as the viewport is resized. Without either 
	of these solutions users will see a float-based layout start to break as the viewport is 
	narrowed. Thus the min-width feature is key to successfully implementing a float-based layout.
</p>
<p>
	A related issue is that the content of a floated element should not hold larger dimensions than the
	space provided by the parent, floating element. For example in this layout the left and right columns 
	have a specific width applied. If content were placed in one of those columns (such as an image) that 
	was wider than the column's set width, the floated element (the column) would be pushed down the page 
	until it found enough room to fit the content of the column. The column, because its content is wider
	than the column itself, will expand to contain it all. As it expands it goes wider than the space
	allowed for the column itself and that forces it down the page until there is enough room to fit.
</p>
<p>
	This column-content issue is something that comes up a lot with people who use Skidoo or similar
	style layouts. This is why I'm going to dedicate the layout's demo site to discussion of the topic.
</p>

<h2>Controlling Column Widths</h2>
<p>
	Now there are some ways to handle this. The first would be to set a specific width to the side
	columns so you understand your limits on content dimenions. By default this layout specifies side-column
	width in EMs. This means they shrink and grow depending on the size of the font used within the page.
	This can be a good thing and a bad thing. If you leave your content to just text, it's great because
	the columns will shrink and grow depending on the user's default font size. Users with eyesight 
	problems will have wider columns to keep the content's relational space equal to those with smaller
	font sizes. However too big a font will squish the middle column out completely.
</p>
<p>
	So what if you want to change the size of the side columns. The edits to the stylesheet are minimal
	and could also be placed in a secondary stylesheet (or theme if you'd like) to override the 
	default values. The CSS would look <a href="demos/pixel_columns.html">something like this</a>:
</p>
<p style="font-family:monospace;font-size:120%;padding-left:10px;">
	#outer-column-container {<br>
	&nbsp;&nbsp;&nbsp;&nbsp;border-width: 0 <em>[right column width]</em> 0 <em>[left column width]</em>;<br>
	}<br>
	#left-column {<br>
	&nbsp;&nbsp;&nbsp;&nbsp;width: <em>[left column width]</em>;<br>
	&nbsp;&nbsp;&nbsp;&nbsp;margin-left: <em>[negative of left column width]</em>;<br>
	}<br>
	#rightColumn {<br>
	&nbsp;&nbsp;&nbsp;&nbsp;width: <em>[right column width]</em>;<br>
	&nbsp;&nbsp;&nbsp;&nbsp;margin-right: <em>[negative of right column width]</em>;<br>
	}
</p>
<p>
	So if I wanted the left column at 200 pixels and the right at 300 pixels the CSS
	would look something like this:
</p>
<p style="font-family:monospace;font-size:120%;padding-left:10px;">
	#outer-column-container {<br>
	&nbsp;&nbsp;&nbsp;&nbsp;border-width: 0 <em>300px</em> 0 <em>200px</em>;<br>
	}<br>
	#left-column {<br>
	&nbsp;&nbsp;&nbsp;&nbsp;width: <em>200px</em>;<br>
	&nbsp;&nbsp;&nbsp;&nbsp;margin-left: <em>-200px</em>;<br>
	}<br>
	#right-column {<br>
	&nbsp;&nbsp;&nbsp;&nbsp;width: <em>300px</em>;<br>
	&nbsp;&nbsp;&nbsp;&nbsp;margin-right: <em>-300px</em>;<br>
	}
</p>

<h2>Aware Of Space Limitations</h2>
<p>
	If we take the above dimensions into consideration we know the left
	column can't have any object wider than 200 pixels. Not so! We also 
	must take padding into account, 10 pixels on each side (by default). 
	This means we can't have anything over 180 pixels in the left column. 
	For the right column the upper width limit is 280 pixels. 
</p>
<p>
	Now, by default, the page has a minimum width of 600 pixels. Take
	away the 500 already in use by the side columns leaves us with
	100 pixels for the middle column, minus padding gives us
	80 pixels. Ah, not so fast! We also have the margins on 
	#page-container that separate the edge of the layout with the
	edge of the viewport. That's 14 pixels on either side, giving us
	an upper limit of only 52 pixels for anything in the middle column.
</p>
<p>
	"FIFTY-TWO?!". Yep. Anything wider and the page would break at it's
	minimum width. You could shrink the right column to 200 pixels, giving 
	you another 100 for a total of 152 pixels maximum width for any single 
	object in the middle column. You could increase your minimum width from
	600 to 800 and make it 352 pixels. You could drop the right column alltogether
	and give yourself 552 pixels of width to play with. Great! Except that's
	still a bit small, especially if you're showing large photos on your
	website.
</p>

<h2>A Cheap Fix</h2>
<p>
	The space problems brought about by this style of layout will frustrate many
	and others will simply throw this style of site out as an option for their
	development. So we need a legitimate way around these spacial issues. Well,
	here's the cheap fix:
</p>
<p style="font-family:monospace;font-size:120%;padding-left:10px;">
	&lt;img src="logo.jpg" <strong>style="margin-right:-100%;"</strong>&gt;
</p>
<p>
	A negative margin on any element will make the browser treat it less wide than it 
	actually is. In this case, a -100% margin, the browser will treat it as if it had
	no width. If the viewport starts to shrink below the space needed to display the e
	image within the column, the image will overflow, but won't break the layout.
</p>
<p>
	Let's be clear about this: the image will <strong>overflow</strong>. This means
	the layout will remain the same and the image will overlap whatever exists in
	the area to its right. If you've got content in the right column, and your image
	is in the middle column, your right column's content will be hidden beneath the
	image. Neither the middle column, nor the layout, will expand to contain the entire 
	image. It's a cheap fix. It'll keep your layout from breaking, but could cause other
	problems. 
</p>
<p>
	You may also find text that would normally wrap around the image to be hidden 
	underneath the image as the text is laid out with respect to an object with
	0 width. A line break or use of a DIV could resolve such issues, but then you
	lose out on the ability to text-wrap the image. This is far from a perfect
	solution.
</p>

<h2>Another Cheap Fix</h2>
<p>
	In fact I've yet to find a solid fix for this issue. But there is another
	option, specific to images, that I've had success with. What you can do is
	create a <code>DIV</code> element and set the image as the background of the
	<code>DIV</code>. Give the DIV a 100% width and it will shrink and grow based on the available space.
	As the column narrows, so will the <code>DIV</code>. At a certain point, the 
	image will start to be cropped. This allows you to put images into the content without 
	the problem of overlapping seen in the previous method.
</p>

<h2>One More Fix</h2>
<p>
	Set the <code>max-width</code> property for the <code>img</code> element to 96% and
	the <code>height</code> property to auto. This will make images shrink as needed. For
	IE 6 and earlier (which do not understand max-width) you could set the 
	<code>overflow-x</code> property to <code>hidden</code> on the immediate parent element
	that contains the image or other such content.
</p>

<!-- middle column end -->

							</div>
						</div>
						<div id="left-column">
							<div class="inside">
<!-- left column start -->

<h3>Stylesheets</h3>
<ul class="rMenu-wide rMenu-ver rMenu">
	<li><a href="css/skidoo_redux.css">Skidoo Redux</a></li>
	<li><a href="css/skidoo_redux_theme.css">Theme</a></li>
	<li><a href="css/skidoo_redux_print.css">Print</a></li>
</ul>

<h3>Demos</h3>
<ul class="rMenu-wide rMenu-ver rMenu">
	<li><a href="demos/two_columns.html">Two Columns</a></li>
	<li><a href="demos/fixed_width.html">Fixed Width</a></li>
	<li><a href="demos/pixel_columns.html">Pixel Width Columns</a></li>
	<li><a href="demos/percent_columns.html">Percent Width Cols</a></li>
	<li><a href="demos/images.html">Background Images</a></li>
	<li><a href="demos/future.html">Theme: Future</a></li>
</ul>

<h3>Reference</h3>
<ul class="rMenu-wide rMenu-ver rMenu">
	<li><a href="http://www.css-discuss.org/">css-discuss.org</a></li>
	<li><a href="http://www.communis.co.uk/dithered/css_filters/css_only/index.html">CSS Filters</a></li>
	<li><a href="http://www.amazon.com/dp/B000ATQYVA/">Gargoyles</a></li>
</ul>

<!-- left column end -->

							</div>
						</div>
						<div class="clear-columns"><!-- do not delete --></div>
					</div>
					<div id="right-column">
						<div class="inside">

<!-- right column start -->

<p>
	For your convienence you can <a href="skidoo_redux_lean.zip">download 
	a complete ZIP of this layout here</a>.
</p>

<h3>Highlights</h3>
<ul>
	<li>Source Ordered</li>
	<li>No Tables</li>
	<li>Very Compatible</li>
</ul>

<p>
	<a href="http://validator.w3.org/check?uri=referer"><img
	src="http://www.w3.org/Icons/valid-html401" border="0"
	alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</p>

<!-- right column end -->

						</div>
					</div>
					<div class="clear-columns"><!-- do not delete --></div>
				</div>
			</div>
			<div id="footer">
				<div class="inside">

<!-- footer start -->

<p>
	This website layout and associated stylesheets are released 
	into the public domain. You do not need permission to use this 
	layout.
</p>

<!-- footer end -->

				</div>
			</div>
		</div>
	</body>
</html>
